// webpack是node写出来的  node写法
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')  //html webpack的一个插件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyjsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  optimization:{ //优化项
    minimizer: [//优化项肯定是个数组，因为还得优化js
      new UglifyjsPlugin({
        cache: true,//是否用缓存
        parallel: true,//是否是并发打包的，一起压缩多个
        sourceMap: true//压缩完js，可能其中es6变为es5了，我需要一个源码影射来更好的调试。
      }),
      new OptimizeCss()
    ]
  },
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js', //打包后的文件名
    path: path.resolve(__dirname, 'build')  //必须是绝对路径，就是webpack.config.js目录下的build目录。
  },
  plugins: [ //数组 放着所有webpack插件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',//定义抽离出的css文件名，还得定义是抽离index.less还是index.css
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',  //解析@import语法，解析路径
          'postcss-loader',
          'less-loader'  //把less转css
        ]
      }
    ]
  }
}